<template>
  <el-card style="max-width: 680px">
    <template #header>
      <div class="card-header">
        <span>信息查看</span>
        <el-icon @click="getTableData()">
          <Refresh/>
        </el-icon>
      </div>
    </template>


    <el-descriptions
        class="margin-top"
        :column="3"
        border
    >

      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <user/>
            </el-icon>
            昵称
          </div>
        </template>
        {{ form.nickname }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <iphone/>
            </el-icon>
            电话
          </div>
        </template>
        {{ form.phone }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <office-building/>
            </el-icon>
            部门
          </div>
        </template>
        {{form.enterprise}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <tickets/>
            </el-icon>
            角色
          </div>
        </template>
        <el-tag size="small">{{form.role==1?"企业用户":"管理员"}}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon >
              <office-building/>
            </el-icon>
            创建日期
          </div>
        </template>
       {{form.createTime}}
      </el-descriptions-item>
    </el-descriptions>


  </el-card>
</template>

<script setup lang="ts">

import {
  Iphone,
  Location,
  OfficeBuilding, Refresh,
  Tickets,
  User,
} from '@element-plus/icons-vue'

import {onMounted, reactive, ref} from 'vue'
import {showTips, successTips, warningTips} from "@/utils/util";

import {getEnterpriseInfoApi, updateMyInfoApi} from "@/api/enterprise";

// do not use same name with ref
const form = reactive({
  nickname: '',
  sex: 1,
  email: "",
  phone: "",
  id: "",
  user_id: "",
  enterprise: "",
  enterprise_contact: "",
  "userId": 7,
  "username": "",
  "role": 1,
  "enterpriseContact": "",
  "createTime": ""
})

onMounted(()=>{
  getEnterpriseInfoApi().then((response: any) => {
    if (response.code === 200) {
      Object.assign(form, response.data[0])

    } else {
      warningTips(response.message)
    }
  })
})

const getTableData = () => {
  getEnterpriseInfoApi().then((response: any) => {
    if (response.code === 200) {
      Object.assign(form, response.data[0])
      successTips(response.message)
    } else {
      warningTips(response.message)
    }
  })

};

defineExpose({
  getTableData
});


</script>

<style scoped>
.el-descriptions {
  margin-top: 20px;
}

.cell-item {
  display: flex;
  align-items: center;
}

.margin-top {
  margin-top: 20px;
}
</style>
